<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationStyle": "custom"
  }
}
</route>

<script lang="ts" setup>
import Navigation from '@/components/Navigation/Navigation.vue';

// 定义导航栏标题
const navTitle = '关于我们';
const navName = '关于我们';
</script>

<template>
  <view class="about-container">
    <!-- 导航栏 -->
    <Navigation :title="navTitle" :name="navName" />

    <!-- 内容区域 -->
    <view class="content">
      <view class="about-text">
        <view class="paragraph">
          当你受够了虚假医疗信息横行，当你对疾病和药品没有更好的了解渠道，当你对医生出具的药物不明就里，当你面对医生手足无措、欲言又止，「优医」应运而生。
        </view>
        <view class="paragraph">
          在医患关系如此紧张的今天，为减少医患矛盾和信息不对称，助健康之完美。
        </view>
      </view>

      <!-- 应用信息 -->
      <view class="app-info">
        <view class="version">版本号: 1.0.0</view>
        <view class="copyright">© 2023 优医. 保留所有权利</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.about-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about-text {
  margin-top: 30rpx;
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.paragraph {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 30rpx;
  text-align: justify;
}

.paragraph:last-child {
  margin-bottom: 0;
}

.app-info {
  margin-top: 60rpx;
  padding: 30rpx 0;
  text-align: center;
  font-size: 26rpx;
  color: #999999;
}

.version {
  margin-bottom: 15rpx;
}
</style>
